<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width = device-width" />
	<title>设备管理</title>
	<link rel="stylesheet" type="text/css" href="../static/fonticon/iconfont.css" />
	<script type="text/javascript" src="../static/fonticon/iconfont.js"></script>
	<link rel="stylesheet" type="text/css" href="../static/css/deviceManage.css" />
	<link rel="stylesheet" type="text/css" href="../static/css/createDevice.css" />
	<!-- <link rel="stylesheet" type="text/css" href="../static/css/editDevice.css"> -->
	<link rel="stylesheet" type="text/css" href="../static/css/delete.css" />
</head>

<body>
	<section id="deviceManage">
		<header>
			<h4>设备管理</h4>
		</header>

		<article id="apikeytip">
			<div>
				<h4>接入设备</h4>
				<p>在接入设备时，请将以下APIKEY写入到设备中，只用于设备注册</p>
				<p>
					<span>
						APIKEY:
					</span>
					<span id="APIKEY">
					</span>
					<button id="DM_copykey" class="DM_copy">复制</button>
					<a id="DM_instruction" href="#APIKEY">使用说明</a>
				</p>
			</div>
		</article>

		<article>
			<header>
				<p>设备数量：
					<span id="deviceCount"></span>个</p>
			</header>
			<div class="DM_content">
				<div id="operation">
					<!-- 搜索 -->
					<input type="text" name="DM_search" id="DM_search" placeholder="输入设备id或设备名称" />
					<button id="DM_mySearch">
						<svg class="searchIcon" aria-hidden="true">
							<use xlink:href="#icon-sousuo"></use>
						</svg>
					</button>
					<div class="leftOperation">
						<button id="addDevice">
							<svg class="addIcon" aria-hidden="true">
								<use xlink:href="#icon-tianjia1"></use>
							</svg>
							添加设备
						</button>
						<button id="DM_dowloadDeviceMSG">
							导出设备信息
						</button>
					</div>
				</div>
				<div class="DM_table">
					<table>
						<thead>
							<th>
								<select name="DM_fromTime">
									<option value="all">全部</option>
									<option value="year">最近一年</option>
									<option value="month">最近三个月</option>
									<option value="day">最近三天</option>
								</select>
							</th>
							<th>数据保密性</th>
							<th>操作</th>
						</thead>
						<tbody id="DM_devices">
							<!-- <tr>
								<td>
									<i class="iconfont icon-bianji3"></i>
									<i class="iconfont icon-shanchu2"></i>
									<i class="iconfont icon-xiangqing"></i>
									<i class="iconfont icon-shoudongtianjia"></i>
									<i class="iconfont icon-shujuguanli"></i>
									<i class="iconfont icon-kaifatiaoshi"></i></td>
							</tr> -->
						</tbody>
					</table>
				</div>
			</div>
		</article>
		<!-- 提示层 -->
		<div id="DM_layout">
			<div id="popup">
				<i class="iconfont icon-success1" id="DM_popImg"></i>
				<span id="popMsg">
				</span>
			</div>
		</div>
		<div id="popup">
			<i class="iconfont icon-success1" id="DM_popImg"></i>
			<span id="popMsg">
			</span>
		</div>

	</section>

	<!-- 遮罩层 -->
	<div id="bg"></div>

	<!--添加设备-->
	<article id="createDevice" class="deviceMsg device">
		<header>
			<h4>接入设备</h4>
		</header>
		<article id="cDSection" class="cDSection">
			<div class="form-group">
				<label for="deviceName">设备名称：</label>
				<input type="text" name="deviceName" id="deviceName" placeholder="设备名称" />
				<ul class="errorsList">
					<li>
						<span id="nameError">
							必填项
						</span>
					</li>
				</ul>
			</div>
			<div class="form-group">
				<label for="deviceAuth">设备编号：</label>
				<input type="text" name="deviceAuth" id="deviceAuth" placeholder="请输入厂商编码的设备标识号码" />
				<ul class="errorsList">
					<li>
						<span id="authError">
							必填项
						</span>
					</li>
				</ul>
				<span class="zl_tips">设备间不能设置相同的字符串，最多512个字母、数字或字母与数字组合的字符串。</span>

			</div>
			<div class="form-group">
				<label>数据保密性：</label>
				<div>
					<label for="secrecy" class="priRadio">
						<input type="radio" name="devicePri" id="secrecy" value="0" checked/>
						<span>私有</span>
					</label>

					<label for="open" class="priRadio">
						<input type="radio" name="devicePri" id="open" value="1" disabled/>
						<span id="DM_open">公开</span>
					</label>
				</div>
			</div>

			<div class="form-group">
				<label>设备接入协议：</label>
				<div>
					<select name="protocol" id="protocol">
					</select>
				</div>

				<label>上传数据类型：</label>
				<div>
					<select name="datatype" id="dataType">
					</select>
				</div>
			</div>
		</article>
		<footer>
			<button id="submitCD" class="submitCD" name="submit">接入设备</button>
			<button id="closeCD" class="closeCD">取消</button>
		</footer>
	</article>

	<!--删除按钮的弹出框-->
	<article id="zl_delete">
		<header>
			<h4>提示</h4>
		</header>
		<article>
			<p>你确定要删除该设备吗？</p>
		</article>
		<footer>
			<button id="deleteButton">确定</button>
			<button id="closeDelete">取消</button>
		</footer>
	</article>

	<!-- 编辑设备 -->
	<article id="editDevice" class="deviceMsg device" style="visibility: hidden">
		<header>
			<h4>编辑设备</h5>
		</header>
		<article class="cDSection">
			<div class="form-group">
				<label for="deviceName">设备名称：</label>
				<input type="text" id="edit_name" placeholder="设备名称" />
				<ul class="errorsList">
					<li>
						<span id="edit_nameError">
							必填项
						</span>
					</li>
				</ul>
			</div>
			<div class="form-group">
				<label for="deviceAuth">设备编号：</label>
				<input type="text" id="edit_deviceAuth" placeholder="请输入厂商编码的设备标识号码" />
				<ul class="errorsList">
					<li>
						<span id="edit_authError">
							必填项
						</span>
					</li>
				</ul>
				<span class="zl_tips">设备间不能设置相同的字符串，最多512个字母、数字或字母与数字组合的字符串。</span>
			</div>
			<div class="form-group">
				<label>数据保密性：</label>
				<div>
					<label for="secrecy" class="priRadio">
						<input type="radio" name="edit_devicePri" id="edit_secrecy" value="0" checked/>
						<span>私有</span>
					</label>

					<label for="open" class="priRadio">
						<input type="radio" name="edit_devicePri" id="edit_open" value="1" disabled/>
						<span id="DM_open">公开</span>
					</label>
				</div>
			</div>

			<div class="form-group">
				<label>设备接入协议：</label>
				<div>
					<select id="edit_protocol">
					</select>
				</div>

				<label>上传数据类型：</label>
				<div>
					<select id="edit_dataType">
					</select>
				</div>
			</div>
		</article>
		<footer>
			<button id="edit_submitCD" class="submitCD">接入设备</button>
			<button id="edit_closeCD" class="closeCD">取消</button>
		</footer>
	</article>

	<!-- 导出设备时增加的列表 -->
	<table id="exportTable">
		<thead>
			<tr>
				<th>name</th>
				<th>id</th>
				<th>createTime</th>
				<th>dataType</th>
				<th>dataType</th>
				<th>number</th>
				<th>privacy</th>
				<th>projectId</th>
				<th>protocolId</th>
			</tr>
		</thead>
		<tbody id="table"></tbody>
	</table>

	<script type="text/javascript" src="../static/js/jquery-3.2.1.min.js"></script>
	<!--剪切板-->
	<script src="../static/js/clipboard.min.js"></script>
	<script src="../static/js/deviceManage.js" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="../static/js/editDevice" type="text/javascript"></script>	 -->
	<script src="../static/js/createDevice.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../static/js/FileSaver.min.js"></script>
	<script type="text/javascript" src="../static/js/tableExport.js"></script>
</body>

</html>